<template>
    <div class="table">
        <div class="container">
            <el-row class="input-suffix">
                <el-col :span="20">
                    <el-button type="primary" size="medium" class="handle-del mr10" @click="query">查询</el-button>
                    <el-input size="medium" v-model="logsUsers" placeholder="请输入姓名" prefix-icon="el-icon-search"
                              class="handle-input mr10" style="width: 50%"></el-input>
                </el-col>
            </el-row>

            <el-table :data="tableData" border class="table" ref="multipleTable"
                      v-loading="loading"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)">

                <el-table-column prop="logsUsers" label="用户名" align="center" width="auto">
                </el-table-column>

                <el-table-column prop="logsIp" label="IP" align="center" width="auto">
                </el-table-column>

                <el-table-column prop="logsInterface" label="接口名称" align="center" width="auto">
                </el-table-column>

                <el-table-column prop="logsParams" label="传递参数" align="center" width="auto">
                </el-table-column>

                <el-table-column prop="logsExecutionTime" label="接口执行时间" align="center" width="auto">
                </el-table-column>

                <el-table-column prop="logsMethodName" label="方法名" align="center" width="auto">
                </el-table-column>

                <el-table-column prop="logsError" label="异常信息" align="center" width="auto">
                </el-table-column>

                <el-table-column prop="logsNowTime" label="调用时间" align="center" width="auto">
                </el-table-column>

                <el-table-column label="操作" width="auto" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" class="blue" @click="moreInfos(scope.$index, scope.row)">
                            查看详细
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-dialog title="详细信息" :visible.sync="editVisible" width="60%">
                <el-form ref="form" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                                <el-input v-model="logsEntity.logsReturnValues" type="textarea" class="rv" :rows="8" size="medium"></el-input>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-col :span="5">
                        <el-button @click="editVisible = false">关闭</el-button>
                    </el-col>
                   </el-row>
                </span>
            </el-dialog>

            <div class="pagination">
                <el-pagination background
                               layout="total,prev, pager, next"
                               :page-size="pageSize"
                               :total="totallRows"
                               :current-page="currentPageNo"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>

        </div>

    </div>
</template>

<script>
    import {
        queryAll
    } from "@/config/api";

    export default {
        name: 'catLogs',
        data() {
            return {
                totallRows: 0, /* 总数据行数 */
                pageSize: 10, /* 当前页数据显示条数 */
                currentPageNo: 1, /* 当前页码 */
                loading: true,
                disabled: false,
                tableData: [],
                logsUsers: "",
                editVisible: false,

                logsEntity: {
                    logsId: "",
                    logsUsers: "",
                    logsIp: "",
                    logsInterface: "",
                    logsParams: "",
                    logsExecutionTime: "",
                    logsMethodName: "",
                    logsReturnValues: "",
                    logsError: "",
                    logsNowTime: ""
                }
            }
        },
        created() {
            this.getData();
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.currentPageNo = val;
                this.getData();
            },

            // 页面加载数据
            getData() {
                queryAll({
                    logsUsers: this.logsUsers,
                    pageNow: this.currentPageNo
                }).then(res => {
                    this.tableData = res.data.records;
                    this.totallRows = res.data.rowCount;
                    this.currentPageNo = res.data.pageNow;
                    this.loading = false;

                })
            },
            // 查询
            query() {
                this.getData();
            },

            moreInfos(index, row) {
                this.disabled = true;
                this.status = 1;
                this.idx = index;
                this.logsEntity.logsReturnValues = JSON.stringify(row.logsReturnValues);
                this.editVisible = true;
            },
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .input-suffix {
        margin: 10px;
    }

    .label {
        margin-right: 50px;
    }

    .rv {
        width:100%;
        height:100%;
    }
</style>
